<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>02_模板语法</title>
</head>

<body>
  <!--
1. 模板的理解:
  动态的html页面
  包含了一些JS语法代码
    双大括号表达式
    指令(以v-开头的自定义标签属性)
  
  模板中有2大类语法，插值语法，指令语法。
  - 插值语法用于插入一个动态的值，插入到标签体文本中（开始标签和结束标签之间）。插值语法针对的是标签体文本
  - 指令语法，vue中有很多的指令，它们干着不同的事情，但它们都是用来操作标签，比如操作标签的某个特定属性值:bind，给标签绑定事件监听@click。指令针对的是标签

2. 双大括号表达式
  语法: {{exp}} 或 {{{exp}}}
  功能: 向页面输出数据
  可以调用对象的方法
  {{这里面是表达式，不是语句}} 
  
  表达式vs语句:
  1.每一个表达式都会产生一个值，语句不会产生一个值。语句是去做一件事情的，比如赋值语句var a = 3; 这条语句做了什么事情？定义一个变量a,给a赋一个值3
  2.表达式不能单独存在，需要和其他语法配合成一条语句使用。

3. 指令一: 强制数据绑定
  功能: 指定变化的属性值
  完整写法:
    v-bind:xxx='yyy'  // yyy会作为表达式解析执行
  简洁写法:
    :xxx='yyy'

4. 指令二: 绑定事件监听
  功能: 绑定指定事件名的回调函数
  完整写法:
    v-on:click='xxx'
  简洁写法:
    @click='xxx'
-->

  <div id="app">

    <h2>1. 双大括号表达式(插值)</h2>
    <p>---{{content}}---</p>
    <p>---{{content.toUpperCase()}}---</p>

    <h2>2. 指令一: 强制数据绑定 v-bind: </h2>
    <a href="url">去学习</a><br> <!-- 不加冒号: 是静态不可变的属性值 -->
    <a v-bind:href="url">去学习</a><br> <!-- 加了冒号: 是动态可变的属性值 -->
    <a :href="url">去学习</a><br> <!-- 简写形式 -->
    <!-- 何时在标签的属性名的左边加冒号: 我希望我的属性值是动态的结果 -->

    <h2>3. 指令二: 绑定事件监听 v-on:</h2> <!-- 一旦说到‘监听/监视’，必然有回调函数 -->
    <button v-on:click="test1">test1111</button>
    <button @click="test1">test2222</button> <!-- click时间，回调函数名test1 -->

  </div>

  <script src="../js/vue.js"></script>
  <script>

    new Vue({
      el: '#app',
      data: {
        content: 'CBA I Like This Game!',
        url: 'http://www.atguigu.com'
      },
      methods: {// 这个对象是一个包含n个事件回调函数方法的对象
        test1(event) {
          alert(event.target.innerHTML)
        }
      }
    })
  </script>
</body>

</html>